// 创建按钮元素
const button = document.createElement('button');
button.innerText = '显示功能列表';
button.id = 'extension-function-button';

// 初始位置
button.style.right = '20px';
button.style.bottom = '20px';

// 将按钮添加到网页上
document.body.appendChild(button);

// 添加按钮的点击事件监听器
button.addEventListener('click', (e) => {
  // 阻止事件传播，避免在拖拽时触发点击事件
  e.stopPropagation();

  // 如果已经存在功能列表，则移除
  const existingMenu = document.getElementById('extension-function-menu');
  if (existingMenu) {
    existingMenu.remove();
  } else {
    // 创建功能列表菜单
    const menu = document.createElement('div');
    menu.id = 'extension-function-menu';

    // 功能列表数组
    const functions = [
      { name: '功能一', action: functionOne },
      { name: '功能二', action: functionTwo },
      { name: '功能三', action: functionThree }
    ];

    // 创建功能列表项
    functions.forEach(func => {
      const item = document.createElement('div');
      item.className = 'menu-item';
      item.innerText = func.name;
      item.addEventListener('click', () => {
        func.action();
        menu.remove(); // 执行完功能后，移除菜单
      });
      menu.appendChild(item);
    });

    // 将菜单添加到网页上（先隐藏，待计算位置后再显示）
    menu.style.visibility = 'hidden';
    document.body.appendChild(menu);

    // 计算菜单的位置，使其出现在按钮的正上方
    const buttonRect = button.getBoundingClientRect();
    const menuHeight = menu.offsetHeight;

    // 判断按钮的吸附位置
    let menuLeft;
    if (button.style.left === '20px') {
      // 吸附在左边，菜单左边与按钮左边对齐
      menuLeft = buttonRect.left;
    } else {
      // 吸附在右边，菜单右边与按钮右边对齐
      menuLeft = buttonRect.right - menu.offsetWidth;
    }

    // 设置菜单的位置
    menu.style.position = 'fixed';
    menu.style.left = `${menuLeft}px`;
    menu.style.top = `${buttonRect.top - menuHeight}px`;
    menu.style.visibility = 'visible';
  }
});

// 拖拽相关变量
let isDragging = false;
let offsetX = 0;
let offsetY = 0;

// 添加鼠标事件监听器
button.addEventListener('mousedown', (e) => {
  isDragging = true;
  // 记录初始偏移
  offsetX = e.clientX - button.offsetLeft;
  offsetY = e.clientY - button.offsetTop;

  // 添加鼠标移动和松开事件
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
});

function onMouseMove(e) {
  if (isDragging) {
    // 更新按钮位置
    const x = e.clientX - offsetX;
    const y = e.clientY - offsetY;

    // 限制按钮在屏幕内
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;
    const buttonWidth = button.offsetWidth;
    const buttonHeight = button.offsetHeight;

    const newX = Math.max(0, Math.min(windowWidth - buttonWidth, x));
    const newY = Math.max(0, Math.min(windowHeight - buttonHeight, y));

    button.style.left = `${newX}px`;
    button.style.top = `${newY}px`;
    button.style.right = 'auto';
    button.style.bottom = 'auto';
    button.style.position = 'fixed';
  }
}

function onMouseUp(e) {
  if (isDragging) {
    isDragging = false;
    // 移除事件监听器
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);

    // 获取窗口宽度
    const windowWidth = window.innerWidth;
    const buttonRect = button.getBoundingClientRect();

    // 计算按钮应该吸附到左边还是右边
    if (buttonRect.left + buttonRect.width / 2 < windowWidth / 2) {
      // 吸附到左边
      button.style.left = '20px';
      button.style.right = 'auto';
    } else {
      // 吸附到右边
      button.style.left = 'auto';
      button.style.right = '20px';
    }
  }
}

// 防止拖拽文本
button.addEventListener('dragstart', (e) => {
  e.preventDefault();
});

// 功能对应的函数
function functionOne() {
  alert('你点击了功能一');
}

function functionTwo() {
  alert('你点击了功能二');
}

function functionThree() {
  alert('你点击了功能三');
}
